<script setup>
import {ref, watch} from 'vue'
import wxLogin from '@/assets/wxLogin.png'
import phoneLogin from '@/assets/phoneLogin.png'
import router from "@/router/router.js"
import {message} from 'ant-design-vue'
import debounce from 'lodash/debounce';
import {verifyCode,sendPhoneCode} from '@/api/user.js'
import {userUserStore} from "@/stores/index.js";

const  userStore = userUserStore()
//验证码倒计时
const isFalse = ref(true)
const isCounting = ref(false)
const count = ref(60)
const formRef = ref()

//二维码登录
const text = ref('http://localhost:5173/');
//默认在登录页面是手机号登录
const isWxLogin = ref(false)

// 表单模型
const formModel = ref({
  phoneNum: '',
  verificationCode: '',
  role: 'student'
});

//发送验证码
const sendVerificationCode = async () => {
  // 直接使用 validateField 方法进行邮箱验证
  await formRef.value.validate(['phone']).then(async () => {
    if (isCounting.value) return
    isFalse.value = false
    isCounting.value = true
    count.value = 60
    sendPhoneCode({phoneNum: formModel.value.phoneNum})
    const interval = setInterval(() => {
      count.value--
      if (count.value <= 0) {
        clearInterval(interval)
        isCounting.value = false
      }
    }, 1000)
  }).catch(() => {
    isFalse.value = true
  })
}

//监听手机号
watch(() => formModel.value.phoneNum, debounce(async () => {
  try {
    await formRef.value.validate(['phoneNum']);
    isFalse.value = false;
  } catch {
    isFalse.value = true;
  }
}, 300));

// 表单验证规则
const rules = {
  phoneNum: [
    { required: true, message: '请输入手机号', trigger: 'change' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'change'
    }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'change' },
    {
      pattern: /^\d{6}$/,
      message: '请输入6位验证码',
      trigger: 'change'
    }
  ]
};
const toWxLogin = () => {
  isWxLogin.value = true
}
const toPhoneLogin = () => {
  isWxLogin.value  = false
}
const onSubmit = async () => {
  try{
    const res = await verifyCode({
      phoneNum: formModel.value.phoneNum,
      code: formModel.value.verificationCode
    })
    if(res.data.code===200){
      router.push({
        name: (formModel.value.role==='student')?'setDetailInfo':'setCompanyInfo',
        query: {
          phone: formModel.value.phoneNum,
          role: formModel.value.role
        }
      })
    }else {
      message.error(res.data.message)
    }
  }catch (err){
    message.error(err.message)
  }
}

//跳转到登录页面
const goToLogin = () => {
  router.push('/login');
}

</script>

<template>
  <div class="login-card-wrapper">

    <!-- 二维码登录 -->
    <a-card v-if="isWxLogin" class="qr-code-login">
      <template #cover>
        <div class="wx-login" slot="title">
          <a-image @click="toPhoneLogin"
                   :preview="false"
                   :src="phoneLogin"
                   height="60px"
                   width="60px"
                   style="left: 20px; border: 0; cursor: pointer"/>
          <span>手机号登录</span>
        </div>
      </template>
      <div class="title-style">
        <span>微信扫一扫快速登录</span>
      </div>
      <div class="qrcode-container">
        <a-space direction="vertical" align="center">
          <a-qrcode :value="text" size="200"/>
        </a-space>
      </div>
      <p class="qrcode-tip">请使用微信扫一扫扫描上面二维码快速注册</p>
    </a-card>

    <!-- 手机号登录 -->
    <a-card class="login-card" v-else>
      <template #cover>
        <div class="wx-login" slot="title">
          <a-image @click="toWxLogin"
                   :preview="false"
                   :src="wxLogin"
                   height="60px"
                   width="60px"
                   style="left: 20px; border: 0; cursor: pointer"/>
          <span>微信登录</span>
        </div>
      </template>
      <div class="title-style">
        <span>一键注册</span>
      </div>
      <a-form
          ref="formRef"
          :model="formModel"
          :rules="rules"
          @submit="onSubmit"
          validateTrigger="change"
      >
        <a-form-item>
          <a-radio-group v-model:value="formModel.role" button-style="solid" class="status">
            <a-radio-button value="student" class="status-button">我是学生</a-radio-button>
            <a-radio-button value="company" class="status-button">我是企业</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="" name="phoneNum">
          <!--          <a-input-group compact >-->
          <!-- 手机号前缀 , 暂不支持-->
          <!--            <a-select v-model:value="phonePrefix" class="phoneNum-prefix ">-->
          <!--              <a-select-option-->
          <!--                  v-for="item in countryCodes"-->
          <!--                  :key="item.code"-->
          <!--                  :value="item.code">-->
          <!--                {{ item.code }}-->
          <!--              </a-select-option>-->
          <!--            </a-select>-->
          <a-input
              v-model:value="formModel.phoneNum"
              placeholder="请输入手机号"
              style="height: 45px;"
          />
          <!--          </a-input-group>-->
        </a-form-item>
        <a-form-item label="" name="verificationCode">
          <a-input
              v-model:value="formModel.verificationCode"
              placeholder="请输入验证码"
              style="height: 45px">
            <template #suffix>
              <a-button type="link"
                        @click="sendVerificationCode"
                        style="font-size: 16px;height: 100%"
                        :disabled="isCounting||isFalse"
              > {{
                  isCounting ? `${count}秒后重发` : '发送验证码'
                }}</a-button>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" class="login-button">注册</a-button>
        </a-form-item>
        <div class="additional-options">
          <a @click="goToLogin">使用密码登录</a>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<style scoped>
.login-button {
  height: 40px;
  width: 100%;
}

.status{
  width: 100%;
  display: flex;
  background-color: white;
}

.status-button{
  background-color: white;
  width: 50%;
  height: 45px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 0 auto; /* 水平居中 */
  font-size: 16px;
}

.wx-login{
  margin-top:5px;
  margin-left: 20px;
  >span{
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
    box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .1);
  }
}

.title-style{
  text-align: center;
  font-size: 22px;
  color: rgb(10, 124, 142);
  transform: translateY(-30px);
}

.qrcode-container{
  display: flex;
  justify-content: center;
}

.qrcode-tip{
  text-align: center;
  display: block;
  margin: 20px 0 50px 0;
  unicode-bidi: isolate;
  color: #999999;
}

.login-card-wrapper {
  width: 400px;
  height: 500px;
  margin-right: 15%;
}

.login-card {
  width: 100%;
}

.additional-options {
  text-align: center;
  margin-top: 16px;
  color: #1890ff;
}

::v-deep .phone-prefix .ant-select-selector {
  width: 80px;
  height: 45px !important;
  line-height: 45px !important; /* 确保内容垂直居中 */
  align-items: center;
  padding: 0 0 0 8px !important;
}

::v-deep .phone-prefix .ant-select-item {
  font-size: 18px !important;
}

::v-deep .phone-prefix .ant-select-selection-item {
  font-size: 18px !important;
  overflow: hidden;

}
</style>